const getList = () => {
    return new Promise((resolve,reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open('get','http://127.0.0.1:3000')
        xhr.send();
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200 ) {
                resolve(JSON.parse(xhr.responseText))
            }
        }
    })
}

getList().then((res) => {
    console.log(res,'res')
}) 

// const renderList = async(parent) => {
//     console.time('渲染时间')
//     const list = await getList();
//     list.forEach(item => {
//         const div = document.createElement('div');
//         div.className = 'item';
//         div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
//         parent.appendChild(div)
//     })
//     console.timeEnd('渲染时间')
// }


// 222  分页渲染  每次setTimtout执行的时候都会进行重排 ，还需要优化性能
// const renderList = async(parent) => {
//     console.time('渲染时间')
//     const list = await getList();
//     const page = 0;
//     const limit = 200;
//     const totalPage = Math.ceil(list.length / limit);

//     const render = (page) => {
//         if(page >= totalPage) return 
//         setTimeout(() => {
//             for(let i = page * limit; i< page * limit + limit; i++) {
//                 const item = list[i]
//                 const div = document.createElement('div');
//                 div.className = 'item';
//                 div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
//                 parent.appendChild(div)
//             }
//             render(page + 1)
//         },0)
//     }

//     render(page)


//     console.timeEnd('渲染时间')
// }

// requestAnimationFrame可以减少重排的次数 ，在没有修改到dom结构的几何属性是不会重排
// const renderList = async(parent) => {
//     console.time('渲染时间')
//     const list = await getList();
//     const page = 0;
//     const limit = 200;
//     const totalPage = Math.ceil(list.length / limit);

//     const render = (page) => {
//         if(page >= totalPage) return 
//         requestAnimationFrame(() => {
//             for(let i = page * limit; i< page * limit + limit; i++) {
//                 const item = list[i]
//                 const div = document.createElement('div');
//                 div.className = 'item';
//                 div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
//                 parent.appendChild(div)
//             }
//             render(page + 1)
//         },0)
//     }

//     render(page)


//     console.timeEnd('渲染时间')
// }

// 文档碎片 分页渲染 xia

const renderList = async(parent) => {
    console.time('渲染时间')
    const list = await getList();
    const page = 0;
    const limit = 200;
    const totalPage = Math.ceil(list.length / limit);

    const render = (page) => {
        if(page >= totalPage) return 
        requestAnimationFrame(() => {

            // 创建一个文档碎片   相当于一个假的dom结构 不会引起浏览器的回流
            const fragment = document.createDocumentFragment()

            for(let i = page * limit; i< page * limit + limit; i++) {
                const item = list[i]
                const div = document.createElement('div');
                div.className = 'item';
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                // parent.appendChild(div) 
                fragment.appendChild(div) //不会触发重排
            }
            parent.appendChild(fragment)

            render(page + 1)
        },0)
    }

    render(page)


    console.timeEnd('渲染时间')
}